<template>
  <div class="px-16">
    <div class="tabs tabs-boxed py-2">
      <a
        class="tab"
        v-for="item in tabList"
        :key="item.tabName"
        :class="item.tabName == activeTab.tabName ? 'tab-active' : ''"
        @click="tabChange(item)"
        >{{ item.tabName }}</a
      >
    </div>
    <div class="flex flex-wrap">
      <div
        v-for="item in videoList"
        :key="item.id"
        class="card m-auto w-80 bg-base-100 shadow-xl my-3"
      >
        <img
          class="h-44 object-cover rounded-lg cursor-pointer"
          :src="item.video_previewimg"
          @click="toDetailPage(item)"
        />
        <div class="card-body p-2 justify-between">
          <h2 class="card-title">
            {{ item.video_title }}
            <div class="badge badge-secondary">NEW</div>
          </h2>
          <div class="card-actions justify-end items-center">
            <div class="badge badge-outline">观看 {{ item.video_view }}</div>
            <div class="stat-figure text-primary cursor-pointer" @click="clickLiked">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                class="inline-block w-8 h-8 stroke-current"
                :class="item.liked == true ? 'fill-current' : ''"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
                ></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-group grid grid-cols-2 px-64 py-10">
      <button class="btn btn-outline" @click="prePage">上一页</button>
      <button class="btn btn-outline" @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script setup>
import { findVideoListLiked } from "@/api/user";
import { findListPageVideoByType } from "@/api/video";
import router from "@/router";
import { onMounted } from "@vue/runtime-core";
import { inject } from "vue";
import { useStore } from "vuex";
const { ref } = require("@vue/reactivity");
/**
 * tab..
 */
const tabList = ref([
  {
    tabName: "我欢",
    current: true,
    type: 'kana',
  },
  {
    tabName: "教程相关",
    current: false,
    type: 'teach',
  },
  {
    tabName: "其他",
    current: false,
    type: 'other',
  },
]);
const activeTab = ref({
  tabName: "我欢",
  current: true,
  type: 'kana'
});
const tabChange = function (item) {
  tabList.value.forEach((element) => {
    if (activeTab == element) {
      element.current = false;
    }
  });
  activeTab.value = item;
  resetQueryParams()
  queryParams.value.type = activeTab.value.type
  initList()
};


/**
 * data
 */
const queryParams = ref({
  currentPage: 1,
  pageSize: 20,
  type: "kana",
});
const videoList = ref([]);
const store = useStore();
const showTips = inject('$showTips')
let totals = 0;

const resetQueryParams = function(){
  queryParams.value.currentPage = 1
  queryParams.value.pageSize = 20
}

const prePage = function(){
  if(queryParams.value.currentPage <= 1){
    return;
  }
  queryParams.value.currentPage -= 1;
  initList()
}

const nextPage = function(){
  //  先写死 后续再改 . 此处逻辑 应为 totals / 
  let limit = Math.round(totals / queryParams.value.pageSize)
  if(queryParams.value.currentPage > limit){
    return;
  }
  queryParams.value.currentPage += 1;
  initList()
}

const initList = function () {
  videoList.value = []
  findListPageVideoByType(queryParams.value).then((res) => {
    let list = res.list;
    videoList.value = list;
    totals = res.totals;
    /**
     * like
     */
    let qingUserInfo = store.state.qingUserInfo;
    if (qingUserInfo?.token) {
      let params = {
        id: qingUserInfo.id,
      };
      findVideoListLiked(params).then((res) => {
        res.forEach((element) => {
          for (let i = 0; i < list.length; i++) {
            if (list[i].id == element.video_id) {
              videoList.value[i].liked = true;
              break;
            }
          }
        });
      });
    }
  });
};

const clickLiked = function(){
  let qingUserInfo = store.state.qingUserInfo;
  if (qingUserInfo?.token) {
    showTips({content: '功能还在码~'})
  } else {
    showTips({content: '别点了哥们，先登录把~'})
  }
}

const toDetailPage = function(item){
  if(item.video_type == 'kana'){
    router.push(`/videoDetail/${item.id}`)
  } else {
    window.open(item.video_linkurl,'_blank')
  }
}

onMounted(() => {
  initList();
});
</script>

<style>
</style>